<template>
  <el-select
    v-model="selectData"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    @change="change"
    class="select"
  >
    <el-option
      v-for="item in provinces"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import pcaa from '@/assets/js/pcaa'
export default {
  props: {
    value: {
      type: [Number, String],
      default: null,
    },
    placeholder: {
      default: '省',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    onlyCq: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    let obj = pcaa['86'];
    let arr = Object.keys(pcaa['86']);
    if (this.onlyCq) {
      this.provinces = [{
        label: obj['500000'],
        value: '500000',
      }]
    } else {
      this.provinces = arr.map((item) => {
        return {
          label: obj[item],
          value: item,
        };
      });
    }
  },
  data() {
    return {
      pcaaData: pcaa,
      // 区域数据
      provinces: [],
      selectData: null,
    };
  },
  watch: {
    value: {
      handler(val) {
        this.selectData = val;
      },
      immediate: true,
    },
  },
  methods: {
    change(val) {
      this.$emit('input', val);
      this.$emit('change', val);
    },
  },
};
</script>
<style lang="scss" scoped>
.select {
  width: 100%;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #b4c3da;
  color: #fff;
}
</style>
